<template>
	<view class="bg-[var(--page-bg-color)] min-h-screen overflow-hidden order-list" :style="themeColor()">
		<view class="fixed left-0 top-0 right-0 z-10 bg-[#fff]" v-if="statusLoading">
			<view class="py-[14rpx] flex items-center justify-between px-[20rpx]">
				<view class="flex-1 bg-[#fafafa] p-[10rpx] rounded-[8rpx] mr-[20rpx]">
					创建时间: {{ create_time_str }}
				</view>
				<view class="nc-iconfont nc-icon-shaixuanV6xx !text-[30rpx] leading-[36rpx] text-[var(--text-color-light6)]"
					@click="handleSelectOrderSearch"></view>

			</view>
			<!-- 门店订单/个人订单 -->
			<view v-if="orderShowType == 'employee'" class="bg-[var(--page-bg-color)] p-[20rpx]">
				<u-subsection :list="searchType" @change="updateSearchType" mode="button" activeColor="var(--primary-color)"
					:fontSize="14" :current="searchTypeIndex"></u-subsection>
			</view>
		</view>

		<mescroll-body ref="mescrollRef" :top="orderShowType == 'employee' ? '200rpx' : '118rpx'" @init="mescrollInit"
			:down="{ use: false }" @up="getShopOrderFn">
			<view class="sidebar-margin pt-[var(--top-m)]" v-if="list.length">
				<template v-for="(item, index) in list" :key="index">
					<view class="mb-[var(--top-m)] card-template">
						<view @click.stop="toLink(item)">
							<view class="flex justify-between items-center">
								<view class="text-[#303133] text-[28rpx] font-400 leading-[36rpx]">
									<text>寄存时间:</text>
									<text class="ml-[10rpx]">{{ timeFormat(item?.tradeTime, 'yyyy-mm-dd hh:MM:ss') }}</text>

								</view>
								<view class="text-[var(--primary-color)]  text-[28rpx] leading-[34rpx]"
									:class="{ 'text-primary': item.status == 0, '!text-[var(--text-color-light9)]': item.status == 10 || item.status == 40 }">
									{{ formatOrderStatus(item) }}</view>
							</view>
							<u-line dashed margin="10rpx 0"></u-line>

							<view class="flex justify-between items-center">
								<view class="text-[#303133] text-[28rpx] font-400 leading-[36rpx] ">
									<text>{{ t('orderNo') }}:</text>
									<text class="ml-[10rpx]">{{ item.no }}</text>
									<text class="text-[#303133] text-[28rpx] font-400 nc-iconfont nc-icon-fuzhiV6xx1 ml-[11rpx]"
										@click.stop="copy(item.no)"></text>
								</view>

								<view class="text-[#303133] text-[28rpx] font-400 leading-[36rpx] ">
									<text class="ml-[10rpx]">{{ formatOrderType(item) }}</text>
								</view>
							</view>
							<u-line dashed margin="10rpx 0"></u-line>



							<block v-for="(subItem, index) in item.items" :key="index">
								<view class="flex box-border mt-[20rpx]">
									<u--image width="150rpx" height="150rpx" :radius="'var(--goods-rounded-big)'"
										:src="img(subItem.picUrl ? subItem.picUrl : '')" mode="aspectFill">
										<template #error>
											<image class="w-[150rpx] h-[150rpx] rounded-[var(--goods-rounded-big)] overflow-hidden"
												:src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill"></image>
										</template>
									</u--image>
									<view class="ml-[20rpx] flex flex-1 justify-between flex-col box-border">
										<view class="flex justify-between items-baseline">
											<view class="max-w-[500rpx] text-[32rpx] leading-[40rpx] font-bold truncate text-[#303133]">
												<view class="brand-tag">
													{{ formatSpuType(subItem.spuType)
													}}
												</view>{{
													subItem.titleName || subItem.spuName }}
											</view>

										</view>
										<view class="flex justify-between items-baseline text-[#303133]">
											<view class="max-w-[322rpx]">
												<view
													class="text-[24rpx] text-[var(--text-color-light6)] font-400 truncate leading-[34rpx] max-w-[369rpx] "
													v-if="subItem.properties">{{ skuSpecFormat(subItem.properties) }}</view>
											</view>
											<view class="text-right text-[28rpx] font-400  leading-[36rpx]">
												x{{ subItem.reserveNumber
												}}
											</view>
										</view>
										<view class="flex justify-between items-baseline text-[#303133] ">
											<view class="max-w-[322rpx]">
												<view class="text-[24rpx]  font-400 truncate leading-[34rpx] max-w-[369rpx] ">
													门店:{{ item.nodeName }}</view>
											</view>
											<view class="text-right text-[24rpx] font-400  leading-[36rpx]">
												<view class=" font-400  leading-[36rpx]">员工:<text v-for="(employee, index) in item.employeeStr"
														:key="index" class="mr-10rpx">
														{{ employee.employeeName }} </text></view>
											</view>
										</view>

									</view>
								</view>

							</block>
						</view>
						<!-- 会员信息 -->
						<memberInfo :member="item?.user" v-if="item?.user"></memberInfo>
						<!-- 订单备注 -->
						<remarkInfo :order="item"></remarkInfo>

					</view>
				</template>
			</view>
			<mescroll-empty v-if="!list.length && loading" :option="{ tip: '暂无订单' }"></mescroll-empty>
		</mescroll-body>

		<!-- 订单筛选 -->
		<select-order-search ref="selectOrderSearchRef" :default-date="create_time" :time-type-list="timeTypeList"
			@confirm="confirmSearchFn"></select-order-search>
		<!-- #ifdef MP-WEIXIN -->
		<!-- 小程序隐私协议 -->
		<wx-privacy-popup ref="wxPrivacyPopupRef"></wx-privacy-popup>
		<!-- #endif -->
	</view>
	<!-- 水印 -->
	<watermark></watermark>
</template>

<script setup lang="ts">
import { ref, nextTick, computed } from 'vue';
import { t } from '@/locale'
import { img, redirect, copy, mobileConceal } from '@/utils/common'

import { getShopOrder } from '@/addon/deposit/api/order';
import MescrollBody from '@/components/mescroll/mescroll-body/mescroll-body.vue';
import MescrollEmpty from '@/components/mescroll/mescroll-empty/mescroll-empty.vue';
import useMescroll from '@/components/mescroll/hooks/useMescroll.js';
import { onLoad, onPageScroll, onReachBottom, onShow, onUnload } from '@dcloudio/uni-app';
import { formatOrderStatus, skuSpecFormat, formatOrderType, getNowMonthDate, timeFormat, formatSpuType, formatAdminAfterSaleStatus, formatAdminDeliveryType } from "@/utils/formatting"
import memberInfo from '@/addon/components/order/memberInfo.vue'
import remarkInfo from '@/addon/components/order/remarkInfo.vue';
const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom);
const list = ref<any>([]);
const loading = ref<boolean>(false);
const statusLoading = ref<boolean>(true);
const orderState = ref('')
const orderShowType = ref('employee') //订单展示类型 employee 门店员工  member 会员



/** 搜索类型 */
const searchType = ref([{ name: '门店订单', value: 0 }, { name: '个人订单', value: 1 }])
const searchTypeIndex = ref(0)
const updateSearchType = (index: number) => {
	searchTypeIndex.value = index;
	getMescroll().resetUpScroll();
}
const wxPrivacyPopupRef: any = ref(null)
const query = ref<any>(undefined);//查询类型

onLoad((option: any) => {
	query.value = 0

	orderState.value = option.status || "";
	orderShowType.value = option.type || "employee";
	if (orderShowType.value == 'employee') {
		create_time.value = getNowMonthDate()
		query.value = undefined

	}
	// getShopOrderStatusFn();
	// #ifdef MP
	nextTick(() => {
		if (wxPrivacyPopupRef.value) wxPrivacyPopupRef.value.proactive();
	})
	// #endif
});


/**
 * 订单查询类型
 */
//日期筛选
const create_time = ref<any>([])
const create_time_str = computed(() => {
	let beginTime = create_time.value[0] ? create_time.value[0].split(' ')[0] : '';
	let endTime = create_time.value[1] ? create_time.value[1].split(' ')[0] : '';
	return beginTime + ' - ' + endTime

})
const timeTypeList = [{
	name: '创建时间',
	status: '0'
}]




//订单筛选
const keyword = ref('')

const selectOrderSearchRef = ref()
const handleSelectOrderSearch = () => {
	selectOrderSearchRef.value.show = true
}
const confirmSearchFn = (data: any) => {
	orderState.value = data.status;
	keyword.value = data.keyword;
	create_time.value = data.create_time;

	list.value = []
	getMescroll().resetUpScroll();
}


onShow(() => {
	const options = uni.getEnterOptionsSync();
	console.log(options)
	// scene 1038	从另一个小程序返回
	// #ifdef MP
	if (options.scene == 1038) {
		uni.$emit('scene', {
			scene: 1038
		})
		return
	}
	// #endif
	nextTick(() => {
		// 评价完成之后，会返回到订单列表，需要请求最新数据
		if (getMescroll()) { getMescroll().resetUpScroll(); }
	})
})
onUnload(() => {
	uni.$off('scene')
})

let wap_member_id = uni.getStorageSync('wap_member_id');
let wap_shop_member_id = uni.getStorageSync('wapShopMember').id;

const getShopOrderFn = (mescroll: any) => {
	loading.value = false;
	let api = getShopOrder

	let data: object = {
		pageNo: mescroll.num,
		pageSize: mescroll.size,
		status: orderState.value,
		employeeName: searchTypeIndex.value == 0 ? undefined : wap_member_id, //员工名称
		userId: orderShowType.value == "employee" ? undefined : wap_shop_member_id, //用户id
		keywords: keyword.value, //关键词

		typeClass: 3, //订单分类 
	};
	api(data).then((res: any) => {
		let newArr = (res.data.list as Array<Object>);
		//设置列表数据
		if (mescroll.num == 1) {
			list.value = []; //如果是第一页需手动制空列表
		}



		list.value = list.value.concat(newArr);

		mescroll.endSuccess(newArr.length);

		loading.value = true;
	}).catch(() => {
		loading.value = true;
		mescroll.endErr(); // 请求失败, 结束加载
	})
}

// const getShopOrderStatusFn = () => {
// 	statusLoading.value = false;
// 	orderStateList.value = [];
// 	let obj = { name: '全部', status: '' };
// 	orderStateList.value.push(obj);

// 	getShopOrderStatus().then((res: any) => {
// 		Object.values(res.data).forEach((item, index) => {
// 			orderStateList.value.push(item);
// 		});
// 		statusLoading.value = true;
// 	}).catch(() => {
// 		statusLoading.value = true;
// 	})
// }



const toLink = (data: any) => {

	redirect({ url: '/addon/deposit/pages/order/detail', param: { order_id: data.id } })


}





</script>
<style lang="scss">
@import '@/addon/shop/styles/common.scss';

.order-list .mescroll-body {
	padding-bottom: constant(safe-area-inset-bottom) !important;
	padding-bottom: env(safe-area-inset-bottom) !important;
}

.order-list :deep(.u-count-down__text) {
	font-size: 24rpx !important;
	color: #EF000C !important;
}
</style>
<style lang="scss" scoped>
.text-color {
	color: var(--primary-color);
}

.bg-color {
	background-color: var(--primary-color);
}
</style>
